<template>

  <div>

    <el-descriptions
      v-for="item in dataList"
      :key="item.id"
      :column="3"
      :title="item.createTime"
      border>
      <el-descriptions-item label="考试得分">
        {{ item.userScore }}分<span v-if="item.hasSaq">（主观分：{{ item.userObjScore }}；客观分：{{ item.userSubjScore }}）</span>
      </el-descriptions-item>
      <el-descriptions-item label="成绩状态">
        <span v-if="item.valid" style="color: #1aac1a">有效</span>
        <span v-else style="color: #ff0000">无效</span>
      </el-descriptions-item>
      <el-descriptions-item label="是否合格">
        {{ item.passed ?'是':'否' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试用时">
        {{ item.userTime }}分钟
      </el-descriptions-item>
      <el-descriptions-item label="交卷状态">
        {{ item.handState_dictText }}
      </el-descriptions-item>
      <el-descriptions-item label="阅卷状态">
        {{ item.reviewState_dictText }}
      </el-descriptions-item>
      <el-descriptions-item label="异常状态">
        <span :class="{'has-ex': item.exState!==0}">{{ item.exState_dictText }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="异常信息">
        {{ item.exMsg || item.exState_dictText || '无异常信息' }}
      </el-descriptions-item>

      <el-descriptions-item label="监控数据">
        <el-link :disabled="!item.captures || item.captures.length === 0" type="warning" size="small" icon="el-icon-picture-outline" @click="previewList(item.captures)">截图</el-link>
        <el-link :disabled="item.examType !== '2' || !item.cameraVideo" style="margin-left: 10px" type="danger" size="small" icon="el-icon-video-camera" @click="showVideo(item.cameraVideo)">主摄</el-link>
        <el-link :disabled="item.examType !== '2' || !item.screenVideo" style="margin-left: 10px" type="success" size="small" icon="el-icon-full-screen" @click="showVideo(item.screenVideo)">录屏</el-link>
        <el-link :disabled="item.examType !== '2' || !item.mobileVideo" style="margin-left: 10px" type="primary" size="small" icon="el-icon-camera" @click="showVideo(item.mobileVideo)">副摄</el-link>
      </el-descriptions-item>


      <el-descriptions-item label="操作选项">
        <el-link type="primary" size="small" icon="el-icon-view" @click="handleShowPaper(item.id)">明细</el-link>
        <el-link v-permission="['exam:detail:paper:update']" style="margin-left: 10px" type="warning" size="small" icon="el-icon-remove-outline" @click="showMarkAs(item)">更改</el-link>
        <el-link v-permission="['exam:detail:paper:delete']" style="margin-left: 10px" type="danger" size="small" icon="el-icon-delete" @click="deletePaper(item.id)">删除</el-link>
      </el-descriptions-item>


    </el-descriptions>


    <el-dialog
      :visible.sync="beforeDialog"
      :append-to-body="true"
      title="人脸截图"
      width="900px"
    >

      <div>
        <image-preview :data-list="captures" data-key="capture">
          <template v-slot:append="scope">
            <div class="pv-box">
              <div v-if="scope.item.refType===0" class="bf-t">考前</div>
              <div v-else class="in-t">考中</div>
              <div>{{ scope.item.createTime }}</div>
              <div v-if="scope.item.success" style="color: #0FDA6D">
                <i class="el-icon-success"/>
              </div>
              <div v-else style="color: #E94738">
                <i class="el-icon-error"/>
              </div>
            </div>
          </template>
        </image-preview>
      </div>

    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="previewVisible"
      :append-to-body="true"
      title="视频预览"
      width="60%"
      @close="previewVisible=false">

      <div v-if="previewVisible" style="max-height: 650px; overflow-x: hidden; overflow-y: auto">
        <video-player v-model="videoUrl" :ref-id="refId" />
      </div>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="markAsVisible"
      :append-to-body="true"
      title="更改成绩"
      width="30%"
      @close="markAsVisible=false">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">


        <el-form-item label="成绩状态" prop="valid">
          <el-radio-group v-model="postForm.valid">
            <el-radio :label="true">有效</el-radio>
            <el-radio :label="false">无效</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="标记状态" prop="exState">

          <el-radio-group v-model="postForm.exState">
            <el-radio v-if="postForm.valid" :label="0">正常</el-radio>
            <el-radio v-if="!postForm.valid" :label="101">舞弊</el-radio>
            <el-radio v-if="!postForm.valid" :label="102">设备故障</el-radio>
          </el-radio-group>

        </el-form-item>

        <el-form-item prop="exMsg" label="操作理由">
          <el-input v-model="postForm.exMsg" type="textarea"/>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="markAsVisible=false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="saveMarkAs">确 定</el-button>
      </div>


    </el-dialog>

  </div>

</template>

<script>

import { uuid } from 'vue-uuid'
import { listPaper, markAs, deletePaper } from '@/api/paper/paper'
import permission from '@/directive/permission'

export default {
  name: 'ExamRecord',
  directives: { permission },
  components: { },
  props: {
    examId: {
      type: String,
      defaultValue: ''
    },
    userId: {
      type: String,
      defaultValue: ''
    }
  },

  data() {
    return {

      dataList: [],

      beforeDialog: false,
      captures: [],

      previewVisible: false,
      videoUrl: '',
      refId: uuid.v4(),

      markAsVisible: false,
      paperId: '',
      postForm: {
        exState: 0,
        valid: true
      },
      rules: {
        valid: [
          { required: true, message: '成绩状态不能为空！' }
        ],
        exState: [
          { required: true, message: '标记状态不能为空！' }
        ]
      },
      loading: false

    }
  },

  watch: {

    // 检测查询变化
    examId: {
      handler() {
        this.showPaper()
      }
    },

    // 检测查询变化
    userId: {
      handler() {
        this.showPaper()
      }
    },

    'postForm.valid': {
      handler(val) {
        if (val) {
          this.postForm.exState = 0
        } else {
          this.postForm.exState = 101
        }
      }
    }
  },

  created() {
    this.showPaper()
  },
  methods: {

    showPaper() {
      listPaper(this.examId, this.userId).then(res => {
        this.dataList = res.data.records
      })
    },

    handleShowPaper(id) {
      this.$router.push({ name: 'PaperDetail', query: { paperId: id }})
    },

    // 构建预览页面
    previewList(list) {
      this.beforeDialog = true
      this.captures = list
    },

    showVideo(videoUrl) {
      this.refId = uuid.v4()
      this.videoUrl = videoUrl
      this.previewVisible = true
    },

    // 显示更改
    showMarkAs(item) {
      this.postForm.paperId = item.id
      this.postForm.userId = item.userId
      this.postForm.valid = item.valid
      this.postForm.exState = item.exState
      this.markAsVisible = true
    },

    // 保存
    saveMarkAs() {
      this.$refs.postForm.validate().then((valid) => {
        if (!valid) {
          return
        }

        this.$confirm('本操作可能会影响学员成绩及通过情况，确认要修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          markAs(this.postForm).then(() => {
            this.$message.success('成绩更改成功！')
            this.markAsVisible = false
            this.showPaper()
          })
        })
      })
    },

    deletePaper(id) {
      // 删除
      this.$confirm('此操作将删除本次的考试记录并恢复1次考试机会，确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePaper({ id: id }).then(() => {
          this.$message.success('删除成功！')
          this.showPaper()
        })
      })
    }

  }
}
</script>

<style scoped>
.has-ex{
  color: #ff0000;
}

.pv-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.pv-box > .bf-t{
  font-weight: 700;
  color: #ff6a00
}

.pv-box > .in-t{
  font-weight: 700;
  color: #0A84FF
}

::v-deep .el-descriptions__title{
  margin-top: 20px;
  margin-bottom: -10px;
}

::v-deep .el-descriptions-row th {
  width: 100px;
}

::v-deep .el-descriptions-row td {
  width: 300px;
}
</style>
